import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import api from '../../../api/api';
import { Table } from 'antd';
import CustomerCart from '../../customerCenter/CustomerCard';
import CloseOrderModal from './CloseOrderModal';
class HisOrderTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {},
      customerCardVisible: false,
      currentCustomerId: null,
    };
  }
  componentWillMount() {
    this.setState({
      tableData: this.props.tableData,
    });
  }

  componentWillReceiveProps(nextProps) {
    if (
      JSON.stringify(this.props.tableData) !==
      JSON.stringify(nextProps.tableData)
    ) {
      this.setState({
        tableData: nextProps.tableData,
      });
    }
  }

  tableChange = (pagination) => {
    this.props.pageChange(pagination)
  };
  // 显示会员卡片
  showCustomerCard = (id) => {
    // console.log('showCustomerCard id:', id);
    this.setState({
      customerCardVisible: true,
      currentCustomerId: id,
    });
  };
  hideCustomerCard = () => {
    this.setState({
      customerCardVisible: false,
    });
  };
  revokeModal = (row) =>{
    this.setState({
      orderId:row.insuranceCardOrderId,
      orderNo:row.insuranceCardOrderNo,
      purchaser:row.purchaser,
      revokeModalShow:true
    })
  }
  getChildrenMsg = (val) => {
    this.setState({
      revokeModalShow: this.refs['children'].state.visible
    })
    console.log('接受到了从closeOrderModal穿过来的实际')
    this.props.parent.getTableChildMsg(this, false)
  }
  downloadCard =async (row)=>{
    window.open(`/_api/insurance_cardorder/${row.insuranceCardOrderId}/cards/download`, "_blank");
  }

  render() {
    const columns = [
      {
        title: '订单编号',
        dataIndex: 'insuranceCardOrderNo',
        width: 150,
        key: 'insuranceCardOrderNo',
        render: (text, row) => {
          return (
            <Link
              to={`orderDetails/${row.insuranceCardOrderNo}?r=${encodeURIComponent(
                // this.props.router.fullPath
              )}`}
            >
              <span className='clickable'>{text}</span>
            </Link>
          );
        },
      },
      {
        title: '购买人',
        dataIndex: 'purchaser',
        width: 150,
        key: 'purchaser',
        render: (text, row) => {
          return (
            <span
              style={{ textDecoration: 'underline', cursor: 'pointer' }}
              onClick={() => {
                this.showCustomerCard(row.purchaserId);
              }}
            >
              {text}
            </span>
          );
        },
      },
      {
        title: '数量(张)',
        dataIndex: 'number',
        width: 150,
        key: 'number',
      },
      {
        title: '订单金额',
        dataIndex: 'amount',
        key: 'amount',
      },
      {
        title: '订单状态',
        dataIndex: 'orderStatus',
        key: 'orderStatus',
        render: (text, row) => {
          if (text === 10) {
            return '已下单';
          } else if(text === 20) {
            return '已完成';
          }else{
            return '已撤单'
          }
        },
      },
      {
        title: '支付状态',
        dataIndex: 'orderPayStatus',
        key: 'orderPayStatus',
        render: (text, row) => {
          if (text === 10) {
            return '待支付';
          } else if(text === 20){
            return '待查账';
          }else{
            return '已支付';
          }
        },
      },
      // {
      //   title: '销售渠道',
      //   dataIndex: 'specialCause',
      //   key: 'specialCause',
      // },
      {
        title: '下单时间',
        dataIndex: 'createDate',
        key: 'createDate'
      },
      {
        title: '操作',
        dataIndex: 'whOrderNo',
        key: 'whOrderNo',
        // crm1012管理列表中增加相应的链接
        render: (text, row) => {
          if(row.orderPayStatus === 30 && row.orderStatus === 20){
           return <span onClick={() => {
              this.downloadCard(row);
            }} className='clickable'>下载卡密</span>
          }else if(row.orderPayStatus === 10 && row.orderStatus === 10){
            return <span onClick={() => {
              this.revokeModal(row);
            }}
            className='clickable'>撤单</span>
          }
        },
      },
    ];
    // 分页
    let { tableData } = this.state;

    let data = tableData
    return (
      <div>
        <CustomerCart
          id={this.state.currentCustomerId}
          visible={this.state.customerCardVisible}
          hideCustomerCard={this.hideCustomerCard}
        ></CustomerCart>

        <div className='table-box block table-search'>
          <Table
            columns={columns}
            dataSource={data.list}
            rowKey={(record) => record.orderNo}
            pagination={{
              showSizeChanger: true,
              total: data.pageIndex !== 1 && data.count === data.pageSize ? data.count + 1 : data.count,
              showTotal: () => `第 ${data.pageIndex} 页`,
              pageSizeOptions: ['10', '20', '50', '100'],
              current: data.pageIndex,
              pageSize: data.pageSize,
            }}
            onChange={this.tableChange}
          />
        </div>
        <CloseOrderModal ref="children" revokeModalShow = {this.state.revokeModalShow} parent={ this } orderId = {this.state.orderId} orderNo = {this.state.orderNo} purchaser = {this.state.purchaser}></CloseOrderModal>
      </div>
    );
  }
}

export default HisOrderTable;
